<template>
	<view class="main">
		<view class="search_container" style="height: 50px;">
			<!-- 选择器 -->
			<u-picker :show="showa" :columns="columnsa" keyName="name" @confirm="getStatus" @close="showa=false" @cancel="showa=false" closeOnClickOverlay></u-picker>
			<!-- 头部信息 -->
			<view class="having">
				<view class="top-a" style="height: 50px;padding: 0px 10px;display: flex;align-items: center;justify-content: space-between;">
					<view class="top-left" style="display: flex;align-items: center;">
						<view class="aaa" style="display: flex;align-items: center;">
							<view style="font-size: 12px;">
								名称：
							</view>
							<view class="search_content" style="width: 150px;">
								<u--input v-model="searchInput" @change="changeSearch()" @clear="clearSearch()" fontSize="12px" clearable style="height: 18px;background-color: #FFF;"></u--input>
							</view>
						</view>
						<view class="bbb" style="display: flex;align-items: center;margin-left: 15px;">
							<view style="font-size: 12px;">
								状态：
							</view>
							<view @click="showa=true" class="top-check" style="width: 65px;height: 30px;;border-radius: 5px;border: 0.5px #e7e6e4 solid;background-color: #FFF;display: flex;justify-content: space-between;align-items: center;padding: 0px 5px;">
								<view class="choose" style="font-size: 12px;color: #FF5500;">
									{{ taga }}
								</view>
								<u-icon name="arrow-down" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-line></u-line>
		<view class="list_container" :style="getHeight()">
			<view class="noDataTag" v-show="pagingList.length==0">
				<view class="a" v-show="!isOpen">
					<div style="height: 100px;"></div>
					<u-loading-icon mode="circle" size="50px"></u-loading-icon>
				</view>
				<view class="b" v-show="isOpen">
					<view class="ccccccc" v-show="pagingList.length==0" style="margin-top: 150px;">
						<u-empty mode="search" text="暂无数据"></u-empty>
					</view>
				</view>
			</view>
			<view class="hasDataList" v-show="pagingList.length!=0">
				<view class="data_container">
					<u-list  :lowerThreshold="10" @scrolltolower="scrolltolower()" :style="getHeightForUlist()">
						<u-list-item v-for="(item,index) in pagingList" :key="index" style="background-color: #FFFFFF;">
							<view class="item_card" style="padding: 10px;">
								<view class="u-top" style="display: flex;justify-content: space-between;align-items:flex-start;">
									<view class="u-top-left" style="width: 70vw;font-weight: 800;">
										{{ item.xmmc }}
									</view>
									<view class="u-top-right">
										<view class="u-top-tag" :style="getFHStyle(item.sffh)">
											{{ getFHContent(item.sffh) }}
										</view>
									</view>
								</view>
								<view class="u-middle" style="margin-top: 8px;">
									<view class="m-1" style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;color: #666;margin-top: 8px;">
										<view class="m-1-2">
											{{ '监测总流量(m³)' }}
										</view>
										<view class="m-1-2" style="color: #333;">
											{{ item.jczll}}
										</view>
									</view>
									<view class="m-1" style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;color: #666;margin-top: 8px;">
										<view class="m-1-2">
											{{ '最大瞬时流量(m³/h)' }}
										</view>
										<view class="m-1-2" style="color: #333;">
											{{ item.maxll }}
										</view>
									</view>
									<view class="m-1" style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;color: #666;margin-top: 8px;">
										<view class="m-1-2">
											{{ '开始时间' }}
										</view>
										<view class="m-1-2" style="color: #333;">
											{{ item.kssj }}
										</view>
									</view>
								</view>
								<view class="u-bottom" style="margin-top: 10px;display: flex;justify-content: flex-end;align-items: center;">
									<view class="u-b-1">
										<u-button color="#FF5500" plain style="width: 60px;height: 30px;" text="详 情" @click="goToDetail(item)"></u-button>
									</view>
									<view class="u-b-1" v-show="item.sffh=='0'">
										<u-button color="#FF5500" style="width: 60px;height: 30px;margin-left: 10px;" text="复 核"  @click="goToFh(item)"></u-button>
									</view>
								</view>
							</view>
							<u-line></u-line>
						</u-list-item>
					</u-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pipecheckQuery } from '@/common/api.js'
	export default{
		onShow(){
			document.body.style.overflow = 'auto'
			this.pagingList = []
			this.isOpen = false
			this.reqData.pageNum = 1
			this.getData()
		},
		data(){
			return{
				reqData:{
					pageNum:1,
					pageSize:10,
					sffh:"",
					xmmc:""
				},
				isOver:false,
				noDataIcon:false,
				isOpen:false,
				/* 数据 */
				pagingList:[],
				
				showa:false,
				columnsa:[[{
					name:'全部',
					value:'',
				},{
					name:'未复核',
					value:'0'
				},{
					name:'已复核',
					value:'1'
				}]],
				taga:'全部',
				
				searchInput:''
			}
		},
		methods:{
			getData(){
				pipecheckQuery(this.reqData).then(res => {
					const data = res
					if(!data){
						this.noDataIcon = true
						return
					}
					if(data.nextPage==0){
						this.isOver = true
					}
					if(this.pagingList.length==0){
						this.pagingList = data.list
					}else{
						this.pagingList = this.pagingList.concat(data.list)
					}
					this.isOpen = true
				})
			},
			scrolltolower(){
				if(this.isOver){
					return
				}else{
					this.reqData.pageNum += 1
					this.getData()
				}
			},
			
			goToDetail(item){
				uni.navigateTo({
					url:`/pages/me/gwzd/detail/index?id=${item.id}&title=${item.xmmc}`
				})
			},
			goToFh(item){
				uni.navigateTo({
					url:`/pages/me/gwzd/recheck/index?id=${item.id}&title=${item.xmmc}`
				})
			},
			
			getFHContent(fh){
				return fh=='1'?'已复核':'未复核'
			},
			getFHStyle(fh){
				let color = '#FF5500'
				if(fh=='1'){
					color = '#53c21d'
				}
				return {
					'font-size':'14px',
					'color':color
				}
			},
			
			getStatus(e){
				this.taga = e.value[0].name
				this.reqData.sffh = e.value[0].value
				this.pagingList = []
				this.reqData.pageNum = 1
				this.isOpen= false
				this.getData()
				this.showa = false
			},
			
			clearSearch(){
				this.pagingList = []
				this.reqData.pageNum = 1
				this.reqData.xmmc = ''
				this.isOpen= false
				this.getData()
			},
			changeSearch(){
				this.pagingList = []
				this.reqData.pageNum = 1
				this.reqData.xmmc = this.searchInput
				this.isOpen= false
				this.getData()
			},
			
			getHeight(){
				let height = uni.getSystemInfoSync().windowHeight - 51
				return{
					'height':height + 'px',
					'width':'100%',
					'background-color':'#FAFAFA'
				}
			},
			getHeightForUlist(){
				let height = uni.getSystemInfoSync().windowHeight - 51
				return{
					'height':height + 'px'
				}
			}
		},
		mounted(){
		}
	}
</script>

<style>
	
</style>